import React, { useEffect } from 'react';

interface ToastProps {
  message: {
    type: 'success' | 'error';
    text: string;
  };
  onClose: () => void;
}

export const Toast: React.FC<ToastProps> = ({ message, onClose }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      onClose();
    }, 3000);

    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div className="fixed top-4 right-4 z-50 animate-slide-up">
      <div className={`p-4 rounded-2xl shadow-strong border-l-4 backdrop-blur-sm ${
        message.type === 'success' 
          ? 'bg-gradient-to-r from-success-50 via-success-100/80 to-success-50 text-success-900 border-l-success-500 border border-success-200' 
          : 'bg-gradient-to-r from-error-50 via-error-100/80 to-error-50 text-error-900 border-l-error-500 border border-error-200'
      }`}>
        <div className="flex items-center space-x-3">
          <div className={`w-8 h-8 rounded-xl flex items-center justify-center shadow-medium ${
            message.type === 'success' ? 'bg-success-500' : 'bg-error-500'
          }`}>
            {message.type === 'success' ? (
              <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            ) : (
              <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            )}
          </div>
          <div>
            <div className="font-semibold text-sm">{message.type === 'success' ? '操作成功' : '操作失败'}</div>
            <div className="font-medium opacity-90 text-sm">{message.text}</div>
          </div>
          <button
            onClick={onClose}
            className="ml-4 text-gray-400 hover:text-gray-600 transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
};